<!-- 角色管理 -->
<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-form label-width="80px" :inline="true" size="normal">
      <el-form-item>
        <el-input
          v-model.trim="roleName"
          placeholder="角色名称"
          size="normal"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item style="margin: 0px 20px">
        <el-button type="primary" icon="el-icon-search" @click="searchRole"
          >查询</el-button
        >
        <el-button @click="searchClear">清空</el-button>
      </el-form-item>
    </el-form>
    <el-form
      label-width="80px"
      :inline="true"
      size="normal"
      style="margin: 20px 0px"
    >
      <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button
          type="danger"
          :disabled="idList.length === 0"
          @click="delRoleAll"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="roleList"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="roleName" label="角色名称">
        <template v-slot="{ row }">
          <template v-if="row.edit">
            <el-input v-model="row.roleName" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="info"
            size="small"
            icon="el-icon-info"
            title="分配权限"
            @click="
              $router.push(
                `/acl/role/auth?id=${row.id}&roleName=${row.roleName}`
              )
            "
          ></el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-check"
            title="确定"
            @click="ensure(row)"
            :disabled="!row.edit"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit-outline"
            title="修改角色"
            @click="row.edit = true"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            title="删除角色"
            @click="delRole(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :style="{ marginTop: '20px' }"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15]"
      style="padding: 20px 0"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
    >
    </el-pagination>
    <el-dialog title="新增角色" :visible.sync="dialogRoleVisible">
      <el-form label-width="80px">
        <el-form-item label="请输入">
          <el-input
            :value="role.roleName"
            v-model.trim="role.roleName"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="assignRole">保存</el-button>
        <el-button @click="resetRoleData">取消</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  reqGetPermissionList,
  reqAddRole,
  reqDelRole,
  reqDelRoleAll,
  reqUpdataRole,
} from "@/api/acl/role";
export default {
  name: "permission",
  data() {
    return {
      username: "",
      currentPage: 1,
      pageSize: 5,
      total: 0,
      roleList: [],
      roleName: "",
      multipleSelection: [],
      dialogRoleVisible: false,
      role: {
        id: "",
        roleName: "",
      },
      idList: [],
    };
  },
  methods: {
    // 获取角色列表
    async getPermissionList() {
      const PermissionList = await reqGetPermissionList(
        this.currentPage,
        this.pageSize,
        this.roleName
      );
      // console.log(PermissionList);
      PermissionList.data.items.forEach((item) => {
        item.edit = false;
      });
      this.roleList = PermissionList.data.items;
      // console.log(this.roleList)
      // vue2中给对象添加数据不具备响应式
      // this.roleList.forEach(item => {
      //   item.edit = false
      // })
      this.total = PermissionList.data.total;
    },
    handleSizeChange(limit) {
      this.pageSize = limit;
      this.getPermissionList();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getPermissionList();
    },
    // 搜索角色
    searchRole() {
      // console.log(111);
      this.getPermissionList(1);
    },
    // 搜索功能点击清空的回调
    searchClear() {
      this.searchRoleName = "";
      this.roleName = "";
      this.getPermissionList();
    },
    // 点击新增角色的回调
    add() {
      this.dialogRoleVisible = true;
      this.role.roleName = "";
      this.role.id = "";
    },
    // 新增角色确定的回调
    async assignRole() {
      try {
        await reqAddRole(this.role);
        this.$message.success("添加成功");
        this.getPermissionList();
      } catch (e) {
        this.$message.success("添加失败" + e.$message);
      }
      this.dialogRoleVisible = false;
    },
    // 新增角色取消的回调
    resetRoleData() {
      this.dialogRoleVisible = false;
      this.role.roleName = "";
      this.role.id = "";
    },
    // 删除角色
    async delRole(id) {
      try {
        await reqDelRole(id);
        this.$message.success("删除成功");
        this.getPermissionList();
      } catch (e) {
        this.$message.error("删除失败" + e.message);
      }
    },
    // 勾选框的回调 收集id到idList中
    handleSelectionChange(selection) {
      this.idList = selection.map((item) => item.id);
      // console.log(this.idList);
    },
    // 删除勾选的角色
    async delRoleAll() {
      try {
        await reqDelRoleAll(this.idList);
        this.getPermissionList();
        this.$message.success("删除成功");
      } catch (e) {
        this.$message.error("删除失败");
      }
    },
    // 修改角色点击取消的回调
    cancelEdit(row) {
      row.edit = false;
      this.$message.warning("您已取消修改");
    },
    // 点击确定修改的回调
    async ensure(row) {
      try {
        await reqUpdataRole(row.id);
        this.$message.success("修改成功");
        row.edit = false;
        this.getPermissionList();
      } catch (e) {
        this.$message.error("修改失败" + e.message);
      }
    },
  },
  mounted() {
    this.getPermissionList();
  },
};
</script>

<style scoped></style>
